<template>

  <div class="login-background">
    <div class="select-box">
      <el-cascader placeholder="请选择考试科目" class="select-cascader" v-model="selected" :props="props" @change="change"/>
      <el-button type="primary" @click="submit" class="submit-btn">确定</el-button>
    </div>
  </div>

</template>

<script setup>
import config from '@/config/index.js'
import ListApis from '@/apis/list.js'
import HomeApis from '@/apis/home'
import {ElMessageBox} from "element-plus";
import useUserStore from '@/stores/user.js'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

let props = ref({});
const selected = ref([])
HomeApis.currentChoose().then(res => {
  if (res.code == 1) {
    if (res.data) {
      //   如果有选择，则重定向
      //   缓存到本地
      // localStorage.setItem(config.cacheCurrentChooseKey, JSON.stringify(res.data));
      userStore.setSelectCategory(res.data)
      router.push(route.query.redirect||'/')
    } else {
      nextTick(() => {
        // 获取行业考试科目

        props.value = {
          // multiple: true,
          lazy: true,
          lazyLoad(node, resolve) {
            const {level} = node
            // console.log(node, level)
            if (level == 0) {
              ListApis.industryList().then(res => {
                if (res.code == 1 && res.data) {
                  res.data.forEach(item => {
                    item.label = item.name
                    item.value = item.id
                    item.leaf = false
                  })
                  resolve(res.data)
                } else {
                  resolve([])
                }
              })
            } else if (level == 1) {
              ListApis.examByIndustry({
                params: {
                  size: 1000,
                  industryId:
                  node.value
                }
              }).then(res => {
                if (res.data) {
                  res.data.forEach(item => {
                    item.label = item.name
                    item.value = item.id
                    item.leaf = false
                  })
                  resolve(res.data)
                } else {
                  resolve([])
                }
              })
            } else if (level == 2) {
              ListApis.leafList({
                params: {examId: node.value, parentId: 0}
              }).then(res => {
                if (res.data) {
                  res.data.forEach(item => {
                    item.label = item.name
                    item.value = item.id
                    item.leaf = item.hasChild ? false : true
                  })
                  resolve(res.data)
                } else {
                  resolve([])
                }
              })

            } else {
              ListApis.leafList({
                params: {examId: node.data.examId, parentId: node.value}
              }).then(res => {
                if (res.data) {
                  res.data.forEach(item => {
                    item.label = item.name
                    item.value = item.id
                    item.leaf = item.hasChild ? false : true
                  })
                  resolve(res.data)
                } else {
                  resolve([])
                }
              })
            }
          },
        }
      })
    }
  }
})

function change(CascaderValue) {
  //   传递参数是个value数组

  // {
  //   "categoryId": 513,
  //     "categoryCode": "513",
  //     "examId": "94",
  //     "examCode": "94",
  //     "industryId": "yixuelei",
  //     "industryCode": "yixuelei",
  //     "categoryName": "执业医师",
  //     "examName": "医学执业资格",
  //     "industryName": "医学类",
  //     "sold": false,
  //     "def": true
  // }
  // console.log(CascaderValue)
}

function submit() {
  // console.log(selected.value)
  if (selected.value.length == 0) {
    ElMessageBox.alert('请选择行业考试科目', {});
    return;
  }
  // 参数categoryList:[{categoryId:'',ifCheck:''}]
  // const categoryList=selected.value.map(e=>{
  //   return {categoryId:e.at(-1),ifCheck: true};
  // })

  // settingChoose入库成功
  // [{"ifCheck": true, "categoryId": 49}, {"ifCheck": true, "categoryId": 48}]
  HomeApis.settingChoose({categoryList: [{categoryId: selected.value.at(-1), ifCheck: true}]}).finally(() => {
    userStore.setSelectCategory({
      examId: selected.value[1],
      industryId: selected.value[0],
      industryCode: selected.value[0],
      categoryCode: selected.value.at(-1),
      categoryId: selected.value.at(-1)
    })
    //   返回重定向的页面
    router.push(route.query.redirect || '/')
  })
}
</script>

<style scoped>
.login-background {
  height: 700px;
  background-image: url('@/assets/images/background2.png');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-box {
  width: 370px;
  height: 200px;
  background-color: #fff;
  border-radius: 10px;
  padding: 16px 49px;
  text-align: center;
}

.select-cascader {
  width: 100%;
}

.submit-btn {
  width: 100%;
  margin-top: 80px;
}

::v-deep(.el-cascader) {
  width: 100%;
}
</style>